<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
			<a-col :md="8" :sm="24">
			  <a-form-item label="用户id">
			    <a-input v-model="queryParam.userid" placeholder="请输入用户id" />
			  </a-form-item>
			</a-col>	
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input v-model="queryParam.name" placeholder="请输入用户昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onPageSearch">查询</a-button>
                <a-button type="primary" style="margin-left: 10px" @click="onClickDefault">登陆设置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <UserManage :queryParam="queryParam" ref="userManage" v-show="currentTab == 'userManage'"></UserManage>
      <IntegralRecharge
        :queryParam="queryParam"
        ref="integralRecharge"
        v-show="currentTab == 'integralRecharge'"
      ></IntegralRecharge>
      <MoneyRecharge
        :queryParam="queryParam"
        ref="moneyRecharge"
        v-show="currentTab == 'moneyRecharge'"
      ></MoneyRecharge> 
     <div slot="tabBarExtraContent">
        <a-space class="table-operator">
          <a-button type="primary" style="margin-bottom: 0px" @click="onExport" icon="plus">批量导出</a-button>
        </a-space>
      </div> 
    </a-card>
    <a-modal
      title="登陆设置"
      :visible="defaultPopup"
      :confirm-loading="confirmLoading"
      v-loading="confirmLoading"
      @ok="defaultSubmit"
      :maskClosable="false"
      width="700px"
      @cancel="defaultPopup = false"
    >
      <a-spin :spinning="confirmLoading" tip="Loading...">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="开启自定义">
            <a-switch checked-children="开" un-checked-children="关" v-model="form.isOpenDefault" />
          </a-form-model-item>
          <a-form-model-item label="默认昵称" :prop="'default_user_nickname'">
            <a-input :disabled="!form.isOpenDefault" v-model="form.default_user_nickname" />
          </a-form-model-item>
          <a-form-model-item
            :style="{
              pointerEvents: form.isOpenDefault ? 'initial' : 'none',
            }"
            label="默认头像"
            :prop="'default_user_pic'"
          >
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  form.default_user_pic = e.data
                }
              "
              @deleteImg="form.default_user_pic = ''"
              :imgSrc="form.default_user_pic"
              imgSizeText="500*500"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button :disabled="!form.isOpenDefault" type="primary" @click="form.isOpenDefault && resetForm">
              恢复默认
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import UserManage from './components/List'
import IntegralRecharge from './components/IntegralRechargeRecord'
import MoneyRecharge from './components/MoneyRechargeRecord'
import { cyyUploadImg } from '@/components/CyyUi'
import { userDefaultInfo, getUserDefaultInfo } from '@/api/user.js'

export default {
  components: {
    UserManage,
    IntegralRecharge,
    MoneyRecharge,
    cyyUploadImg,
  },
  props: {},
  data() {
    return {
      queryParam: {
        // type: 'type',
		userid: '',
        name: '',
        phone: '',
      },
      currentTab: 'userManage',
      defaultPopup: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      form: {
        default_user_nickname: '',
        default_user_pic: '',
        isOpenDefault: false,
      },
      rules: {
        default_user_pic: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: ['blur', 'change'],
          },
        ],
        default_user_nickname: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.$refs[val].$refs.table.refresh(true)
      })
    },
  },
  methods: {
    onPageSearch() {
      this.$nextTick(() => {
        this.$refs[this.currentTab].$refs.table.refresh(true)
      })
    },
    async onClickDefault() {
      this.defaultPopup = true
      this.confirmLoading = true
      const res = await getUserDefaultInfo()
      this.form = {
        ...res.data,
        isOpenDefault: res.data.default_user_pic ? true : false,
      }
      this.confirmLoading = false
    },
    // 提交设置
    async defaultSubmit() {
      this.confirmLoading = true
      if (!this.form.isOpenDefault) {
        let { form } = this.$options.data()
        delete form.isOpenDefault
        const res = await userDefaultInfo(form).catch((err) => err)
        this.defaultPopup = false
        this.confirmLoading = false
      } else {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            let form = JSON.parse(JSON.stringify(this.form))
            delete form.isOpenDefault
            const res = await userDefaultInfo(form).catch((err) => err)
            this.defaultPopup = false
          }
          this.confirmLoading = false
        })
      }
    },
    // 恢复默认
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.card_top_padding {
  background: #fff;
  margin-bottom: 11px;
  padding: 24px;
  // display: inline-block;
}
</style>
